<template>

    <div>

        <el-card class="box-card my-border">
            <div slot="header">
                <span class="card-header">保全类型</span>
            </div>
            <div>
                {{ submitData.trial_extra_type }}
            </div>
        </el-card>


        <el-card class="box-card my-border">
            <div slot="header">
                <span class="card-header">当事人</span>
            </div>
            <el-table :data="submitData.dsr"  :border="true">
                <el-table-column width="100" label="地位">
                    <template slot-scope="scope">
                        <div>{{scope.row.DW }}</div>
                    </template>
                </el-table-column>

                <el-table-column label="当事人信息">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type === 1">
                            <p>姓名：{{ scope.row.XM }}</p>
                            <p>身份证号码：{{scope.row.ZJHM}}</p>
                            <p>性别：{{ scope.row.XB }}</p>
                            <p>民族：{{ scope.row.MZ }}</p>
<!--                            <p>出生日期：{{ birthdayFormat(scope.row.CSRQ) }}</p>-->
                            <p>出生日期：{{ scope.row.CSRQ }}</p>
                            <p>联系电话：{{ scope.row.DH.length > 0? scope.row.DH.reduce((total,item)=> {return total+" "+item.content} ,""): '未填写' }}</p>
                            <p>住址：{{ scope.row.DZ.length>0? scope.row.DZ.reduce((total ,item)=> {return total+" "+item.content},""):'未填写' }}</p>
                        </div>
                        <div v-else>
                            <p>公司或组织机构名称：{{ scope.row.XM }}</p>
                            <p>统一社会信用代码：{{scope.row.ZJHM}}</p>
                           <p>地址：{{ scope.row.DZ.length>0? scope.row.DZ.reduce((total ,item)=> {return total+" "+item.content},""):'未填写' }}</p>

                        </div>
                    </template>
                </el-table-column>


                <el-table-column label="诉讼代理人">
                    <template slot-scope="scope">

                        <el-card class="box-card" v-for="(ssdlr,idx) in scope.row.SSDLR" :key="idx">

                            <div v-if="parseInt(ssdlr.type) === 1" class="text ">
                                <p>类型：律师</p>
                                <p>姓名：{{ ssdlr.XM }}</p>
                                <p>联系电话：{{ ssdlr.DH }}</p>
                                <p>事务所：{{ ssdlr.SWS }}</p>
                            </div>

                            <div v-else>
                                <p>类型：个人</p>
                                <p>姓名：{{ ssdlr.XM }}</p>
                                <p>性别：{{ ssdlr.XB }}</p>
                                <p>民族：{{ ssdlr.MZ }}</p>
<!--                                <p>出生日期：{{ birthdayFormat(ssdlr.CSRQ) }}</p>-->
                                <p>出生日期：{{ ssdlr.CSRQ }}</p>
                                <p>身份证号码：{{ ssdlr.ZJHM }}</p>
                                <p>联系电话：{{ ssdlr.DH }}</p>
                                <p>住址：{{ ssdlr.DZ }}</p>
                            </div>
                        </el-card>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>


        <el-card class="box-card my-border">
            <div slot="header">
                <span class="card-header">财产保全信息</span>
            </div>
            <el-table :data="submitData.bqList"  :border="true">
                <el-table-column width="100"  label="类型">
                    <template slot-scope="scope">
                        {{ getTypeStr(scope.row.type) }}
                    </template>
                </el-table-column>

                <el-table-column label="财产信息">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type === 1">
                            <p>类型：房产</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>坐落：{{ scope.row.content.ZL }}</p>
                            <p>房产权证号：{{ scope.row.content.QZHM }}</p>
                            <p>份额占比：{{ scope.row.content.FEZB }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                            <div>
                                <el-row>线索附件：</el-row>
                                <el-row style="display: flex;align-items: center" :gutter="20" v-if="scope.row.imgUrls" v-for="(v,i) in scope.row.imgUrls" :key="v.id">

                                    <el-col :span="2" style="text-align: center">{{ i+1 }}</el-col>
                                    <el-col :span="2">
                                        <el-image  style="width:5rem;height: 5rem" fit="cover" :src="v.b64"></el-image>
                                    </el-col>
                                    <el-col :span="3">
                                        {{ v.type_str }}
                                    </el-col>
                                </el-row>
                                <el-row v-else>
                                    暂无附件
                                </el-row>
                            </div>
                        </div>

                        <div v-else-if="scope.row.type === 2">
                            <p>类型：车辆</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>车辆品牌：{{ scope.row.content.CLPP }}</p>
                            <p>车牌号码：{{ scope.row.content.CLHM }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                            <div>
                                <el-row>线索附件：</el-row>
                                <el-row style="display: flex;align-items: center" :gutter="20" v-if="scope.row.imgUrls" v-for="(v,i) in scope.row.imgUrls" :key="v.id">

                                    <el-col :span="2" style="text-align: center">{{ i+1 }}</el-col>
                                    <el-col :span="2">
                                        <el-image  style="width:5rem;height: 5rem" fit="cover" :src="v.b64"></el-image>
                                    </el-col>
                                    <el-col :span="3">
                                        {{ v.type_str }}
                                    </el-col>
                                </el-row>
                                <el-row v-else>
                                    暂无附件
                                </el-row>
                            </div>
                        </div>


                        <div v-else-if="scope.row.type === 3">
                            <p>类型：银行</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>银行账户：{{ scope.row.content.KHZH }}</p>
                            <p>开户行：{{ scope.row.content.KHH }}</p>
                            <p>冻结金额：{{ scope.row.content.DJJE }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                            <div>
                                <el-row>线索附件：</el-row>
                                <el-row style="display: flex;align-items: center" :gutter="20" v-if="scope.row.imgUrls" v-for="(v,i) in scope.row.imgUrls" :key="v.id">

                                    <el-col :span="2" style="text-align: center">{{ i+1 }}</el-col>
                                    <el-col :span="2">
                                        <el-image  style="width:5rem;height: 5rem" fit="cover" :src="v.b64"></el-image>
                                    </el-col>
                                    <el-col :span="3">
                                        {{ v.type_str }}
                                    </el-col>
                                </el-row>
                                <el-row v-else>
                                    暂无附件
                                </el-row>
                            </div>

                        </div>

                        <div v-else-if="scope.row.type === 4">
                            <p>类型：动产</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>具体内容：{{ scope.row.content.CCMC }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                            <div>
                                <el-row>线索附件：</el-row>
                                <el-row style="display: flex;align-items: center" :gutter="20" v-if="scope.row.imgUrls" v-for="(v,i) in scope.row.imgUrls" :key="v.id">

                                    <el-col :span="2" style="text-align: center">{{ i+1 }}</el-col>
                                    <el-col :span="2">
                                        <el-image  style="width:5rem;height: 5rem" fit="cover" :src="v.b64"></el-image>
                                    </el-col>
                                    <el-col :span="3">
                                        {{ v.type_str }}
                                    </el-col>
                                </el-row>
                                <el-row v-else>
                                    暂无附件
                                </el-row>
                            </div>
                        </div>

                        <div v-else-if="scope.row.type === 5">

                            <p>类型：股权</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>企业名称：{{ scope.row.content.QYMC }}</p>
                            <p>冻结比例：{{ scope.row.content.DJBL }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                            <div>
                                <el-row>线索附件：</el-row>
                                <el-row style="display: flex;align-items: center" :gutter="20" v-if="scope.row.imgUrls" v-for="(v,i) in scope.row.imgUrls" :key="v.id">

                                    <el-col :span="2" style="text-align: center">{{ i+1 }}</el-col>
                                    <el-col :span="2">
                                        <el-image  style="width:5rem;height: 5rem" fit="cover" :src="v.b64"></el-image>
                                    </el-col>
                                    <el-col :span="3">
                                        {{ v.type_str }}
                                    </el-col>
                                </el-row>
                                <el-row v-else>
                                    暂无附件
                                </el-row>
                            </div>
                        </div>

                        <div v-else-if="scope.row.type === 7">
                        <p>类型：第三人债权</p>
                        <p>权属人：{{ scope.row.QSR }}</p>
                        <p>财产名称：{{ scope.row.content.CCMC }}</p>
                        <p>查封金额：{{ scope.row.content.DJJE }}</p>
                        <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                        <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                        <div>
                            <el-row>线索附件：</el-row>
                            <el-row style="display: flex;align-items: center" :gutter="20" v-if="scope.row.imgUrls" v-for="(v,i) in scope.row.imgUrls" :key="v.id">

                                <el-col :span="2" style="text-align: center">{{ i+1 }}</el-col>
                                <el-col :span="2">
                                    <el-image  style="width:5rem;height: 5rem" fit="cover" :src="v.b64"></el-image>
                                </el-col>
                                <el-col :span="3">
                                    {{ v.type_str }}
                                </el-col>
                            </el-row>
                            <el-row v-else>
                                暂无附件
                            </el-row>
                        </div>
                    </div>

                    </template>
                </el-table-column>

            </el-table>
        </el-card>


        <el-card class="box-card my-border">
            <div slot="header">
                <span class="card-header">担保财产信息</span>
            </div>
            <el-table v-if="!submitData.has_baohan" :data="submitData.dbList" :border="true">

                <el-table-column width="100"  label="类型">
                    <template slot-scope="scope">
                        {{ getTypeStr(scope.row.type) }}
                    </template>
                </el-table-column>

                <el-table-column label="财产信息">
                    <template slot-scope="scope">
                        <div v-if="scope.row.type === 1">
                            <p>类型：房产</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>坐落：{{ scope.row.content.ZL }}</p>
                            <p>房产权证号：{{ scope.row.content.QZHM }}</p>
                            <p>份额占比：{{ scope.row.content.FEZB }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                        </div>

                        <div v-else-if="scope.row.type === 2">
                            <p>类型：车辆</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>车辆品牌：{{ scope.row.content.CLPP }}</p>
                            <p>车牌号码：{{ scope.row.content.CLHM }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                        </div>


                        <div v-else-if="scope.row.type === 3">
                            <p>类型：银行</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>银行账户：{{ scope.row.content.KHZH }}</p>
                            <p>开户行：{{ scope.row.content.KHH }}</p>
                            <p>冻结金额：{{ scope.row.content.DJJE }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                        </div>

                        <div v-else-if="scope.row.type === 4">
                            <p>类型：动产</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>具体内容：{{ scope.row.content.CCMC }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                        </div>

                        <div v-else-if="scope.row.type === 5">

                            <p>类型：股权</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>企业名称：{{ scope.row.content.QYMC }}</p>
                            <p>冻结比例：{{ scope.row.content.DJBL }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                        </div>


                        <div v-else-if="scope.row.type === 7">
                            <p>类型：第三人债权</p>
                            <p>权属人：{{ scope.row.QSR }}</p>
                            <p>财产名称：{{ scope.row.content.CCMC }}</p>
                            <p>查封金额：{{ scope.row.content.DJJE }}</p>
                            <p>保全类型：{{ getBqlxStr(scope.row.bqlx) }}</p>
                            <p v-if="scope.row.bqlx === 3">查封/冻结到期日：{{ scope.row.xfdqr }}</p>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

            <el-table v-else :data="submitData.bhList" :border="true" :show-header="false">

                <el-table-column width="100">
                    <template>
                        {{'保函'}}
                    </template>
                </el-table-column>

                <el-table-column>
                    <template slot-scope="scope">
                        <p>担保人：{{ scope.row.DJJG }}</p>
                        <p>保单号：{{ scope.row.content.BDH }}</p>
                    </template>
                </el-table-column>

            </el-table>
        </el-card>


        <el-card v-if="submitData.dbrList.length>0" class="box-card my-border">
            <div slot="header">
                <span class="card-header">担保人</span>
            </div>
            <el-table :data="submitData.dbrList"  :border="true">

                <el-table-column label="担保人信息">
                    <template slot-scope="scope">
                        <p>姓名：{{ scope.row.XM }}</p>
                        <p>身份证号码：{{scope.row.ZJHM}}</p>
                        <p>性别：{{ scope.row.XB }}</p>
                        <p>民族：{{ scope.row.MZ }}</p>
<!--                        <p>出生日期：{{ birthdayFormat(scope.row.CSRQ) }}</p>-->
                        <p>出生日期：{{ scope.row.CSRQ }}</p>
                        <p>联系电话：{{ scope.row.DH }}</p>
                        <p>住址：{{ scope.row.DZ }}</p>
                    </template>
                </el-table-column>

            </el-table>
        </el-card>

        <el-card class="box-card my-border">
            <div slot="header">
                <span class="card-header">文件资料</span>
            </div>

            <el-table :data="submitData.trialFile" :border="true">
                <el-table-column label="图片">
                    <template slot-scope="scope">
                        <el-image style="width:10rem;height: 10rem" fit="cover" :src="scope.row.b64"  ></el-image>
                    </template>
                </el-table-column >
                <el-table-column label="文件类型">
                    <template slot-scope="scope">
                       {{scope.row.type_str}}
                    </template>
                </el-table-column>
            </el-table>


        </el-card>

        <el-row :gutter="20">
            <el-col>
                <el-button type="primary" @click="next()" class="my-btn-next">提交</el-button>
            </el-col>
        </el-row>
    </div>

</template>

<script>

    import format from '@/utils/format'
    import {mapState,mapActions} from 'vuex'
    import moment from 'moment'
    import copy from 'fast-copy'

    export default {
        name: "Confirm",

        data(){

            return {

            }
        },


        created() {

        },

        computed:{
            ...mapState([
                'step','submitData','AH'
            ]),


        },


        methods:{
            ...format,

            ...mapActions([
                'setStep','setSubmitData'
            ]),

            getBqlxStr(bqlx){
                switch (bqlx) {
                    case 1:
                        return '查封/冻结';
                    case 2:
                        return '解除';
                    case 3:
                        return '续封/续冻';
                }
            },

            next(){

                let params = {}

                params.dsr = copy(this.submitData.dsr)

                params.trial_extra_type = this.submitData.trial_extra_type

                params.dsr.map((v,i)=>{
                    v.extra = [];
                    // v.CSRQ = moment()
                    //     .year(v.CSRQ.year)
                    //     .month(v.CSRQ.month)
                    //     .date(v.CSRQ.day)
                    //     .format('YYYY-MM-DD')

                    v.extra.push(...v.DH,...v.DZ)
                    delete v.DZ
                    delete v.DH
                    delete v.input_DH
                    delete v.is_input_DH
                    delete v.input_DZ
                    delete v.is_input_DZ
                })

                params.bqList = copy(this.submitData.bqList)
                params.bqList.map(v=>{
                    if(v.imgUrls){
                        v.imgUrls.map(vv=>{
                            delete vv.b64
                            delete vv.type_str
                            delete vv.status
                        })
                    }
                })

                if(this.submitData.has_baohan){

                    params.dbList = copy(this.submitData.bhList)

                }else{
                    params.dbList = copy(this.submitData.dbList)
                }

                params.dbr = this.submitData.dbrList

                params.AH = this.AH;

            //    params.trial_extra_id = this.trialExtraId;

                params.trialFile = copy(this.submitData.trialFile);

                params.trialFile.map((v)=>{
                    delete v.b64
                    delete v.type_str
                    delete v.status
                });

                this.$api.submit(params)
                    .then((res)=>{
                        this.setStep(this.step + 1);
                    })
            }
        }


    }
</script>

<style scoped>
    .box-card{margin-bottom:2rem}
    .card-header{font-size: 2rem}
</style>